import React from 'react';
import { Toast, } from 'antd-mobile';
import ReactPullLoad, { STATS } from "react-pullload";
import "../../../../node_modules/react-pullload/dist/ReactPullLoad.css";

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
			hasMore: true,
			data:[],
			action: STATS.init,
            page: 1,
            type: props.match.params.type,
        }
    }
	componentDidMount(){
		document.title = this.props.match.params.name
        this.getList()
	}
	getList(){
		var req={
            page: 1,
            size: 12,
            type: this.state.type,
        }
        global.Ajax.hhtc_request("active/active_list",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    page: this.state.page,
                    allNum: data.data.allNum,
                });
            }
		})
	}
	// 获取商品
	handleAction = action => {
		console.info(action, this.state.action, action === this.state.action);
		//new action must do not equel to old action
		if (action === this.state.action) {
		  	return false;
		}
		if (action === STATS.refreshing) {
		  	//刷新
		  	this.handRefreshing();
		} else if (action === STATS.loading) {
		  	//加载更多
		  	this.handLoadMore();
		} else {
		  	//DO NOT modify below code
		  	this.setState({
				action: action
		  	});
		}
	};	
	handRefreshing = () => {
		if (STATS.refreshing === this.state.action) {
		  	return false;
		}
        var req={
            page: 1,
			size: 12,
            type: this.state.type,
        }
        global.Ajax.hhtc_request("active/active_list",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    action: STATS.refreshed,
                    page: this.state.page,
                });
            }
		})
		this.setState({
		  	action: STATS.refreshing
		});
	};
	handLoadMore = () => {
		if (STATS.loading === this.state.action) {
		  	return false;
		}
		//无更多内容则不执行后面逻辑
		if (!this.state.hasMore) {
		  	return;
        }
        var req={
            page: this.state.page,
			size: 12,
            type: this.state.type,
        }
        global.Ajax.hhtc_request("active/active_list",req).then(data=>{
			if(data.code===1){
                if(data.data.length>0){
					this.setState({
                        data: this.state.data.concat(data.data.data),
                        action: STATS.reset,
                    });
				}else{
					this.setState({
                        action: STATS.reset,
                        hasMore: false
                    });
				}
            }
		})
		this.setState({
		  	action: STATS.loading
		});
	};
	render(){
		return(
			<div className=''>
            <ReactPullLoad
                downEnough={100}
                action={this.state.action}
                handleAction={this.handleAction}
                hasMore={this.state.hasMore}
                distanceBottom={100}
            >
                <div className='sign_index_list'>
                    {this.state.data.map((item,index)=>{
                        return(
                            <div key={'list'+index} className='item' onClick={()=>{this.props.history.push('/page/home/signup/detail/'+item.id)}}>
                                <img alt='' src={item.img} className='pic' />
                                <p className='title'>{item.title}</p>
                                <p className='desc'>{item.info}</p>
                                <p className='peop'>{item.name}</p>
                            </div>
                        )
                    })}
                </div>
            </ReactPullLoad>
            {/* <div className='sign_index_list'>
                <div className='item'>
                    <img alt='' src={require('../../imgs/banner.png')} className='pic' />
                    <p className='title'>2021年7月短视频拍摄概念通识2021年7月短视频拍摄概念通识</p>
                    <p className='desc'>简单的乐曲分析并结合基本乐理的学习，全面提高对音 乐的感知力和认知力。</p>
                    <p className='peop'>唐晓宇</p>
                </div>
                <div className='item'>
                    <img alt='' src={require('../../imgs/banner.png')} className='pic' />
                    <p className='title'>2021年7月短视频拍摄概念通识2021年7月短视频拍摄概念通识</p>
                    <p className='desc'>简单的乐曲分析并结合基本乐理的学习，全面提高对音 乐的感知力和认知力。</p>
                    <p className='peop'>唐晓宇</p>
                </div>
            </div> */}
				
			</div>
		)
	}
}
